<template>
  <div class="g-bg clearfix">
    <div class="tips" v-if="tipsFlag">
      <span>{{ tipstext }}</span>
    </div>

    <div class="sonlepage">
      <div class="overtext">
        <div class="cvrwrap">
          <div class="u-cover">
            <img :src="songSheet.coverImgUrl + '?param=200y200'" alt="" />
            <span class="msk"></span>
          </div>
        </div>
        <div class="cnt">
          <div class="hd clearfix">
            <i class="lab"></i>
            <span class="tit">{{songSheet.name}}</span>
          </div>
          <p class="clearfix user">
               <a href="javascript:;" class="author_picture"><img :src="songSheet.avatarUrl + '?param=40y40'"></a>
                <span><a href="javascript:;"  class="name1">{{songSheet.nickname}}</a></span>
               
                <span class="cletime">{{songSheet.createTime | formatTime1}}创建</span>
               </p>
       
          <div class="btns clearfix">
            <a href="javascript:;" title="播放" class="btn1" @mousedown="click_play">
              <i class="play1"></i>
              播放
            </a>
            <a href="javascript:;" title="添加" class="btn2" @mousedown="add_playList"> </a>
            <a href="javascript:;" title="收藏" class="btn3">
              <i>({{songSheet.subscribedCount}})</i>
            </a>
            <a href="javascript:;" title="分享" class="btnA btn4">
              <i class="btni">({{songSheet.shareCount}})</i>
             
            </a>
            <a href="javascript:;" title="下载" class="btnA btn5">
              <i class="btni">下载</i>
            </a>
            <a href="javascript:;" class="btnA">
              <i class="btn6 btni" v-if="songSheet.commentCount">({{songSheet.commentCount}})</i>
            </a>
          </div>
           <div class="tags clearfix" v-if="songSheet.tags.length">
               <b>标签:</b>
               <a href="javascript:;" class="u-tag" v-for="(el,index) in songSheet.tags" :key="index"><i>{{el}}</i></a>
           </div>
           <p class="int" v-if="songSheet.description.length">
               <b>介绍:</b>
              
               <span v-for="(el,index) in songSheet.description" :key="index">{{el}}<br></span>
           </p>
          
        </div>
      </div>
       <div class="n-songtb">
          <div class="u-title-1">
            <h3><span>歌曲列表</span></h3>
            <span class="sub">{{songSheet.trackCount}}首歌</span>
            <div class="more">播放：<strong class="ct">{{songSheet.playCount}}</strong> 次</div>
          </div>
       </div>
       <div class="m-table">
           <thead>
              <tr>
                 <th class="first">
                    <div>&nbsp;</div>
                 </th>
                 <th>
                    <div class="w1 af0">
                       歌曲列表
                    </div>
                 </th>
                 <th>
                    <div class="w1 af1">
                          时长
                    </div>
                 </th><th>
                    <div class="w1 af2">
                       歌手
                    </div>
                 </th><th>
                    <div class="w1 af3">
                        专辑
                    </div>
                 </th>
              </tr>
           </thead>
           <tbody @mouseleave="fns_move(-1)">
             <tr class="even" v-for="(el,index) in tracks" :key="index" @mouseenter="fns_move(index)">
               <td>
                   <div>
                     <span class="ply" @mousedown="play_music(index)">&nbsp;</span>
                     <span class="num">{{index + 1}}</span>
                   </div>
               </td>
               <td>
                  <div class="tt overtext"> <router-link class="cur" :to="{path:'/song',query:{id:el.id}}">{{el.name}}</router-link></div>
               </td>
               <td class="fn">
                  <span v-show="index != funsFlag">{{el.dt | formatTime}}</span>
                  <div class="fns clearfix" v-show="index == funsFlag">
                  <span class="fn_add cur" @mousedown="add_playList2(index)"></span>
                  <span class="col cur"></span>
                   <span class="share cur"></span>
                   <span class="dl cur"></span>
                   </div>
               </td>
               <td>
                 <span class="text1 overtext cur">{{el.ar[0].name}}</span>
               </td>
               <td><span class="text2 overtext cur">{{el.al.name}}</span></td>
             </tr>
           </tbody>
       </div>
        <div class="see-more">
           <div class="text_more">查看更多内容，请下载客户端</div>
           <a href="javascript:;" class="more_down">立即下载</a>
        </div>
      <!-- 评论区 -->
       <CommentArea/>
    </div>

    <div class="g-sd">
      <h3 class="u-hd">
        <span class="f-f1">喜欢这个歌单的人</span>
      </h3>
      <ul class="m-rct clearfix">
         <li v-for="el in playlists" :key="el.userId" :title="el.nickname">
          
            <router-link :to="{
              path:'/user/home',
              query:{
                  id:el.userId
              }
            }"><img :src="el.avatarUrl + '?param=40y40'"></router-link>
         </li>
          
   
      </ul>
      <h3 class="u-hd">
        <span class="f-f1">热门歌单</span>
      </h3>

         <li v-for="el in hot" :key="el.id" class="hot_list">
          <div class="cver">
            <a href="javascript:;" @mousedown="getsongSheet(el.id)">
              <img :src="el.coverImgUrl + '?param=50y50'" alt="" />
            </a>
             
          </div>
          <div class="info">
            <p>
              <a href="javascript:;" class="sname"  @mousedown="getsongSheet(el.id)">
                {{el.name}}
              </a>
            </p>
            <p>
              <span>by &nbsp;</span>
              <!-- <a href="javascript:;"></a> -->
              <router-link :to="{
                path:'/user/home',
                query:{
                  id:el.userId
                }
              }">{{ el.creator.nickname }}</router-link>
            </p>
          </div>
        </li>
           <Load/>
    </div>
  </div>
</template>

<script>
import Load from '../components/Load.vue'
import axios from "axios";
import CommentArea from '../components/CommentArea.vue'
export default {
  name: "SongSheet",
  data() {
    return {
    
      songSheet_id: "",
      music:'',
      songSheet:{
         name:'',
         createTime:'',
         nickname:'',
         subscribedCount:'',
         shareCount:'',
         commentCount:'',
         tags:[],
         description:[],
         coverImgUrl:'',
         avatarUrl:'',
         trackCount:'',
         playCount:''  

      },

      playlists: [],
      hot: [],
      comment: [],
      text_data: "",
      tipsFlag: false,
      tipstext: "",
      tipsset: "",
      hotComments: [],
      comflag: "",
      ReplyText: "",
      contrast: "",
      total: "",
      page: 5,
      marvellous_flat: true,
      marvellous_flat1: true,
      Turn_pages: 1,
      Turn_type1:{
        backgroundPosition:'0 -620px',
        color:'#cacaca',
        cursor:'default'
      },
      Turn_type2:{
        backgroundPosition:'-75pX -620px',
        color:'#cacaca',
        cursor:'default'
      },
      zan_bg:{
         backgroundPosition:'-170px 0' 
      },
      page_stype:1,
      page_stype_bg:{
        backgroundPosition:'0 -650px',
        borderColor:'#A2161B',
        color:'#fff',
        cursor:'default'
      },
      tracks:[],
      funsFlag:-1,

    };
    
    
  },
  components:{
       CommentArea,
       Load
  },
  methods: {
   
    submit() {
      if (this.text_data.length <= 140 && this.text_data.length > 0) {
        axios.get("http://localhost:8080/api/comment", {
          params: {
            t: "1",
            type: "2",
            id: this.songSheet_id,
            content: this.text_data,
          },
          headers: {
            withCredentials: true,
          },
        });

        this.text_data = "";
         clearTimeout(this.tipsset);
        this.tipsFlag = true;
        this.tipstext = "评论成功";
        this.tipsset = setTimeout(() => {
          this.tipsFlag = false;
        }, 2000);
      } else if (this.text_data.length > 140) {
        clearTimeout(this.tipsset);
        this.tipsFlag = true;
        this.tipstext = "输入不能超过140个字符";
        this.tipsset = setTimeout(() => {
          this.tipsFlag = false;
        }, 2000);
      } else {
        clearTimeout(this.tipsset);
        this.tipsFlag = true;
        this.tipstext = "输入点内容在提交吧";
        this.tipsset = setTimeout(() => {
          this.tipsFlag = false;
        }, 2000);
      }
    },
    click_reply(index, name) {
      this.comflag = index;
      this.ReplyText = "回复" + name + ":";
      this.contrast = "回复" + name + ":";
    },
    click_Submit(value) {
      if (this.ReplyText.length <= 140) {
        if (this.ReplyText.slice(0, this.contrast.length) == this.contrast) {
          this.comflag = -1;
          axios
            .get("http://localhost:8080/api/comment", {
              params: {
                t: "2",
                type: "2",
                id: this.songSheet_id,
                content: this.ReplyText.slice(this.contrast.length, 140),
                commentId: value,
              },
              headers: {
                withCredentials: true,
              },
            })
            .then(
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "回复成功";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              },
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "回复失败";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              }
            );
        } else if (this.ReplyText.length != "") {
          
          this.comflag = -1;
            axios
            .get("http://localhost:8080/api/comment", {
              params: {
                t: "1",
                type: "2",
                id: this.songSheet_id,
                content: this.ReplyText
                
              },
              headers: {
                withCredentials: true,
              },
            })
            .then(
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "评论成功";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              },
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "评论失败";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              }
            );
        } else {
          clearTimeout(this.tipsset);
          this.tipsFlag = true;
          this.tipstext = "输入点内容在提交吧";
          this.tipsset = setTimeout(() => {
            this.tipsFlag = false;
          }, 2000);
        }
      }
    },
    jump(value,index) {
     
      if (value > 0 && value <= Math.ceil(this.total / 20) ) {
      if (value >= 5) {
        if (value <= Math.ceil(this.total / 20) - 5) {
          this.page = value;
          this.marvellous_flat1 = true;
          
        } else {
          this.page = Math.ceil(this.total / 20) - 4;
          this.marvellous_flat1 = false;
        }
        //改变页码
      }else {
         this.page = 5;
      } 

      if (value == 1) {
        this.page = 5;
        this.marvellous_flat = true;
      } else {
        this.marvellous_flat = false;
      }

      
      
        this.Turn_pages = value;
         axios
        .get("http://localhost:8080/api/comment/playlist" + '?' + Date.now(), {
          params: {
            id: this.songSheet_id,
            limit: "20",
            offset: (this.Turn_pages - 1) * 20,
          },
        })
        .then((response) => {
     
          this.comment = response.data.comments;
        });
        
      }
     
     this.page_stype = index;
     
    },
    zan(value,data,index,flag){
      
       axios.get('http://localhost:8080/api/comment/like' + '?' + Date.now(),{
           params:{
            id:this.songSheet_id,
            cid:data,
            t:value?'0':'1',
            type:'2'
         }
       })
       .then( 
         () => {

               if (flag) {
                 if (value) {

                 this.comment[index].likedCount = this.comment[index].likedCount - 1;
                    }else {
                this.comment[index].likedCount = this.comment[index].likedCount + 1;
              }
             this.comment[index].liked = !value;

               }else {

                 if (value) {
                 this.hotComments[index].likedCount = this.hotComments[index].likedCount - 1;
              }else {
                this.hotComments[index].likedCount = this.hotComments[index].likedCount + 1;
              }
             this.hotComments[index].liked = !value;

               }

      
     
       } 
       )
    },
       
     
       
      
    
    click_play(){
        this.$bus.$emit('musicLists',this.tracks)
        // this.$bus.$emit('musicList',this.music)
    },
    add_playList(){
      this.$bus.$emit('addPlayLists',this.tracks)
    },
    add_playList2(index){
      this.$bus.$emit('addPlayList',this.tracks[index])
    },
 
 
    getsongSheet(index){
       
        this.songSheet_id= index;
        
       
    },
    fns_move(index){
      this.funsFlag = index;
     
    },
    play_music(index){
       this.$bus.$emit('musicList',this.tracks[index])
    }

    
  },
  mounted() {
    this.songSheet_id = this.$route.query.id;
    this.$bus.$emit('comment',this.$route.query.id,'/comment/playlist',2)
   
   
  },

  watch: {
    songSheet_id(value) {
        
        axios.get('http://localhost:8080/api/playlist/detail',{
            params:{
                id:value,

            },
            headers:{
                withCredentials: true,
            }
        }).then ( (response) =>{
        
            
            this.songSheet.name = response.data.playlist.name;
            this.songSheet.createTime = response.data.playlist.createTime;
            this.songSheet.nickname = response.data.playlist.creator.nickname;
            this.songSheet.shareCount = response.data.playlist.shareCount;
            this.songSheet.subscribedCount = response.data.playlist.subscribedCount;
            this.songSheet.commentCount = response.data.playlist.commentCount;
            this.songSheet.tags = response.data.playlist.tags;
            
            this.songSheet.trackCount = response.data.playlist.trackCount;
            this.songSheet.playCount = response.data.playlist.playCount;
            this.songSheet.coverImgUrl = response.data.playlist.coverImgUrl;
            this.tracks = response.data.playlist.tracks;
            this.playlists = response.data.playlist.subscribers;
            this.songSheet.avatarUrl = response.data.playlist.creator.avatarUrl;
            if (response.data.playlist.description) {
              this.songSheet.description = response.data.playlist.description.split('\n');
            }
            
          
        })
        // 获取评价
        axios.get('http://localhost:8080/api/comment/playlist',{
          params:{
            id:value
          },
           headers:{
                withCredentials: true,
            }
        }).then( (response) => {
       
          this.comment = response.data.comments;
          this.hotComments = response.data.hotComments;
          this.total = response.data.total;
          
        })

        axios.get('http://localhost:8080/api/top/playlist',{
          params:{
            limit:'5'
          }
        }
         
        ).then( (response) => {
         
          this.hot = response.data.playlists;
        })

     
    },
  },
}
</script>

<style scoped lang='less'>

  .sonlepage {
    float: left;
    padding: 37px 30px 40px 40px;
    width: 640px;

    .cvrwrap {
      position: relative;
      float: left;
      width: 206px;
      margin: 0 -226px 0 0;
      .u-cover {
          margin: 4px 0 0 5px;
        width: 200px;
        height: 200px;
        img {
          display: block;
          width: 200px;
          height: 200px;
          
        }
        .msk {
          position: absolute;
          top: -1px;
          left: 1px;
          width: 208px;
          height: 208px;
          background: url(../images/coverall.png) no-repeat 0 -1285px;
        }
      }
    }
  }

.cnt {
  float: right;
  width: 414px;
}
.lab {
  float: left;
  width: 54px;
  height: 24px;
  overflow: hidden;
  background: url(../images/icon.png) no-repeat 0 -243px;
}
.tit {
  position: relative;
  word-wrap: break-word;
    word-break: break-word;
  display: inline-block; 
  margin-left: 7px;
  font-size: 20px;
  text-align: left;
  line-height: 24px;
  white-space: normal;
  text-align: left;
  width: 345px;
}
.s-fc {
  margin: 5px 0 10px 0;
  text-align: left;
  color: #999;
}

.btns {
  margin: 0 0 25px 0;
}
.play1 {
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 2px 2px 0;
  overflow: hidden;
  background: url(../images/button2.png) no-repeat 0 -1622px;
}
.btn1 {
  float: left;

  height: 31px;
  line-height: 31px;
  width: 51px;
  padding: 0 7px 0 8px;
  text-align: center;
  background: url(../images/button2.png) no-repeat 0 -387px;
  cursor: pointer;
  color: #fff;
}
.btn2 {
  float: left;
  margin-right: 5px;
  height: 31px;
  width: 31px;
  background: url(../images/button2.png) no-repeat 0 -1588px;
  cursor: pointer;
}
.btn3 {
  float: left;
  margin-right: 6px;
  padding: 0 5px 0 0;
  height: 31px;
  line-height: 30px;
  background: url(../images/button2.png) no-repeat right -1020px;
  cursor: pointer;
  i {
    float: left;
    min-width: 23px;
    height: 31px;
    padding: 0 2px 0 28px;
    background: url(../images/button2.png) no-repeat 0 -977px;
  }
}
.btnA {
  float: left;
  margin-right: 6px;
  padding: 0 5px 0 0;
  height: 31px;
  line-height: 30px;
  cursor: pointer;
  background: url(../images/button2.png) no-repeat right -1020px;
}
.btni {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  height: 30px;
  line-height: 30px;
}

.btn4 {
  background: url(../images/button2.png) no-repeat right -1020px;
  i {
    background: url(../images/button2.png) no-repeat 0 -1225px;
  }
}

.btn5 {
  i {
    background: url(../images/button2.png) no-repeat 0 -2761px;
  }
}
.btn6 {
  padding-right: 8px;
  background: url(../images/button2.png) no-repeat 0 -1465px;
}

.icon {
  display: inline-block;
  width: 11px;
  height: 8px;
  background: url(../images/icon.png) no-repeat -65px -520px;
}



.g-sd {
  float: right;
  width: 200px;
  padding: 20px 40px 40px 30px;
}
.u-hd {
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  text-align: left;
  font-weight: bold;
}
.m-rct {
  
  margin: 0 0 25px -13px;
  li {
    float: left;
    padding: 0 0 13px 13px;
    width: 40px;
    height: 40px;
    img {
      
      width: 40px;
      height: 40px;
    }
  }
}
.cver {
  float: left;
  width: 50px;
  height: 50px;
  a {
    width: 100%;
    height: 100%;
    img {
    width: 100%;
    height: 100%;
  }
  }
  
}
.sname {
  float: left;

  font-size: 14px;
  color: #000;
  width: 140px;
  height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  :hover {
    color: inherit;
    text-decoration: underline;
  }
}
.info {
  margin-left: 60px;
  line-height: 24px;
  text-align: left;
  p {
    width: 140px;
  }
}







.m-cmmt {
  margin-top: 20px;
}
.itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}
.head {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
  img {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: -100px;
  }
}
.cntwrap {
  margin-left: 60px;
}
.rp {
  margin-top: 15px;
  text-align: left;
}

.cnt1 {
  text-align: left;
  a {
    color: #0c73c2;
  }
}
.cnt2 {
  margin: 16px 0 0;
  .time {
    float: left;
    text-align: left;
    color: #999;
  }
  .zan {
    float: left;
    a {
      display: inline-block;
    }
  }
}
.iconzan {
  margin-top: -4px;
  display: inline-block;
  width: 15px;
  height: 14px;
  background: url(../images/icon2.png) no-repeat -150px 0;
  vertical-align: middle;
}
.sep {
  float: left;
  color: #ccc;
  margin: 0 10px;
}
.r-zan {
  float: right;
}
.reply {
  float: left;
}
.ReplyArea {
  position: relative;
  margin: 10px 0 0 0;
  padding: 8px 19px;
  line-height: 20px;
  background: #f4f4f4;
  border: 1px solid #dedede;
  text-align: left;
}
.s-fc7 {
  margin-right: 5px;
  color: #0c73c2;
  line-height: 20px;
}
.u-title {
  height: 34px;
  border-bottom: 2px solid #c20c0c;
  h3 {
    float: left;
    line-height: 28px;
    font-weight: normal;
    font-size: 20px;
  }
}
.sub {
  float: left;
  margin: 9px 0 0 20px;
  color: #666;
}
.iptarea {
  position: relative;
  margin-bottom: 20px;
}
.head1 {
  float: left;
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.u-txtwrap {
  margin-left: 62px;
  position: relative;
  padding: 0 14px 0 0;
}
#text-f {
  height: 50px;
  width: 100%;
  padding: 5px 6px 6px;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
  outline: none;
  border: 1px solid #cdcdcd;
  resize: none;
  overflow: auto;
}
.f-c {
  padding-top: 10px;
  position: relative;
  a {
    float: right;
    width: 46px;
    height: 25px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    background: url(../images/button.png) no-repeat -84px -64px;
  }
}
.zs {
  float: right;
  margin-right: 10px;
  line-height: 25px;
  color: #999;
}
.corr {
  position: absolute;
  width: 13px;
  height: 15px;

  top: 4px;
  left: 56px;
}
.arrclr {
  display: block;
  margin: -36px 0 0 1px;
  color: #fff;
  font-size: 24px;
  height: 10px;
}
.arrline {
  display: block;
  color: #cdcdcd;
  font-size: 24px;
}
.rept {
  position: relative;
  margin: 18px 0 15px 0;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}
.iner {
  padding: 15px;
  padding: 15px 31px 15px 15px;
  background: #f8f8f8;
  border: 1px solid #fcfcfc;
  border-radius: 2px;
}
#auto-id {
  resize: none;
  padding: 5px 6px 6px;
  width: 100%;
  outline: none;
  line-height: 19px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  box-sizing: content-box;
  height: 20px;
}
.b-f {
  padding-top: 10px;
  a {
    float: right;
    width: 46px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #fff;
    background: url(../images/button.png) no-repeat -84px -64px;
  }
}
.words {
  float: right;
  margin: 5px 7px 0 0;
}
.tips {
  position: fixed;
  margin: 495px 0 0 -116px;
  top: 20px;
  left: 50%;
  width: 214px;
  height: 40px;

  background: #fff;
  line-height: 40px;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
.separate {
  margin-top:10px ;
  height: 21px;
  text-align: left;
}
.textarea {
  color: #333;
}
.zanNum {
  margin: 0 0 0 6px;
}
.u-page {
  margin: 20px 0;
  text-align: center;
}
.zbtn {
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 47px;
  height: 24px;
  padding-left: 22px;
  line-height: 24px;
  background: url(../images/button.png) no-repeat 0 -560px;
  text-align: left;
  &:hover {
    background: url(../images/button.png) no-repeat 0 -590px;
    color: inherit;
  }
}

.zpr {
  color: #cacaca;
  cursor: default;
}

.znxt {
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 47px;
  height: 24px;
  padding-right: 22px;
  line-height: 24px;
  background: url(../images/button.png) no-repeat -75px -560px;

  cursor: default;
  text-align: right;
  cursor: pointer;
  &:hover {
    background: url(../images/button.png) no-repeat -75px -590px;
    color: inherit;
  }
}

.zpgi {
  height: 22px;
  padding: 0 8px;
  background-color: #fff;
  line-height: 22px;
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: url(../images/button.png) no-repeat 0 9999px;
  
  &:hover {
    border: 1px solid #000;
  }
}
.author_picture {
    float: left;
    margin: 0 10px 0 0;
    width: 35px;
    height: 35px;
    img {
        width: 35px;
        height: 35px;
    }
}
.name1 {
    float: left;
   line-height: 35px;
   color: #0c73c2;
   &:hover{
       text-decoration: underline;
       color: inherit;
       color: #0c73c2;
   } 
}
.cletime {
    float: left;
    margin: 0 0 0 15px;
    line-height: 35px;
    color: #999;
}
.user {
    margin: 0 0 20px;
    line-height: 35px;
}
.hd {
    margin: 0 0 8px;
}
.tags {
    margin: 10px 0 0;
    b {
        float: left;
        margin: 0 4px 0 0;
        height: 22px;
        line-height: 22px;
        color: #666;
        font-weight: normal;
    }
}
.u-tag {
    float: left;
    margin: 0px 10px 3px 0;
    padding: 0 10px 0 0;
    text-shadow: 0 1px #fdfdfd;
    background: url(../images/button2.png) no-repeat right -27px;
    line-height: 22px;
    height: 22px;
    cursor: pointer;
    &:hover {
         background: url(../images/button2.png) no-repeat right -1430px;
         i {
              background: url(../images/button2.png) no-repeat 0 -1400px;
         }
    }
    i {
        background: url(../images/button2.png) no-repeat 0 0;
        position: relative;
        padding: 0 3px 0 13px;
        float: left;
        height: 22px;
        line-height: 22px;
        
    }
  
}
.int {
    margin-top:4px;
    white-space: normal;
    text-align: left;
    color: #666;
    line-height: 18px;
    b {
        font-weight: normal;
        color: #666;
    }
}
.n-songtb {
  margin-top:27px ;
}
.u-title-1 {
  height: 33px;
  border-bottom:2px solid #c20c0c;
  h3 {
    float: left;
    font-size:20px;
    line-height: 28px;
    font-weight: normal;
  }
}
.more {
  margin: 8px 0 0;
 float: right;
}
.m-table {
  width: 100%;
  border: 1px solid #d9d9d9;
  th {
    height: 34px;
    background-color:#f7f7f7;
    background: url(../images/table.png) repeat-x 0 0;
    text-align: left;
    font-weight: normal;
    color: #666;
  }
  td {

    padding: 6px 10px;
    line-height: 18px;
    text-align: left;
  }

}
.first {
  width: 74px;
  div {
  height: 18px;
  line-height: 18px;
  padding: 8px 10px;
  }
 
}
.w1 {
  height: 18px;
  line-height: 18px;
  padding: 8px 10px;
  background: url(../images/table.png) no-repeat 0 -56px;

}
.af0 {
  width: 215px;

}
.af1 {
  width: 91px;
}  
.af2 {
  width: 70px;
}
.af3 {
  width: 110px;
}

.even {
  &:nth-child(2n + 1) {
    td {
      background-color:#f7f7f7;
    }
  }
}
.ply {
  float: right;
  width: 17px;
  height: 17px;
  cursor: pointer;
  background: url(../images/table.png) no-repeat 0 -103px;
  &:hover {
    background: url(../images/table.png) no-repeat 0 -128px;
  }
}

.num {
   width: 25px;
   margin-left:5px;
   color: #999;
}
.tt {
  width: 200px;
  
  padding-right:15px ;
} 
 


.text1  {
  float: left;
  width: 70px;
} 
 
 

.text2 {
  float: left;
  width: 110px;

  
}
.cur {
  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
.fn_add {
  float: left;
  width: 13px;
  height: 13px;
  background:url(../images/icon.png) no-repeat 0 -700px;
  &:hover{
    background:url(../images/icon.png) no-repeat -22px -700px;
  }
}
.col {
  float: left;
  width: 18px;
  height: 14px;
  background: url(../images/table.png) no-repeat 0 -174px;
   &:hover{
    background:url(../images/table.png) no-repeat -20px -174px;
  }
}
.fns {
  
  span {
    margin: 0 5px 0 0;
  }
}
.share {
   float: left;
  width: 18px;
  height: 14px;
  background: url(../images/table.png) no-repeat 0 -195px;
   &:hover{
    background:url(../images/table.png) no-repeat -20px -195px;
  }
}
.dl {
  float: left;
  width: 18px;
  height: 14px;
  background: url(../images/table.png) no-repeat -81px -174px;
   &:hover{
    background:url(../images/table.png) no-repeat -104px -174px;
  }
}
.see-more {
  margin: 30px 0 20px;
  width: 100%;
  height: 66px;

}
.text_more {
  margin: 0 0 16px;
  font-size:13px;
  color: #333333;
}
.more_down {
  display: inline-block;
  width: 120px;
  height: 30px;
  background-image: linear-gradient(90deg,#ff5a4c 0%,#ff1d12 100%);
  border-radius: 18px;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}
.hot_list {
  margin: 0 0 15px;
  height: 50px;
}
.ct {
  color: #c20c0c;
}


 

</style>  